<template>
  <div class="detail_content">
    <p class="title">| 小店商城订单（{{total}}）</p>

    <el-table
      :data="productTableData"
      style="width:100%"
      class="table_member_order"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="商品ID" prop="id"></el-table-column>
      <el-table-column label="商品名称" prop="title"></el-table-column>
      <el-table-column label="购买数量" prop="quantity"></el-table-column>
      <el-table-column label="订单金额" prop="total_amount"></el-table-column>
 
      <el-table-column label="实付金额" prop="actual_amount"></el-table-column>
         <el-table-column label='订单状态'>
      <template slot-scope="scope">
           <p v-if="scope.row.order_status == 1">待支付</p>
           <p v-if="scope.row.order_status == 5">待核销</p>
           <p v-if="scope.row.order_status == 10">已核销</p>
           <p v-if="scope.row.order_status == 15">已取消</p>
           <p v-if="scope.row.order_status == 20">已失效</p>
      </template>
    </el-table-column>
    </el-table>
   
     <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

    <p class="title">| 小店现金券订单（{{couponTotal}}）</p>
    <div class="order_info">
      <el-table
        :data="orderTableData"
        style="width:100%"
        max-height="600"
        class="table_member_order"
        :cell-style="tc"
        :header-cell-style="tccolor"
      >
        <el-table-column label="现金券名称" prop="title"></el-table-column>
        <el-table-column label="所属小店" prop="shop_name"></el-table-column>
        <el-table-column label="售价/实付价"  >
         <template slot-scope="scope">
              <p v-if='scope.row.total_amount'>¥ {{scope.row.total_amount}}/{{scope.row.actual_amount}}</p>
              <p v-else>---/---</p>
         </template>
        </el-table-column>
        <el-table-column label="购买数量" prop="quantity"></el-table-column>
        <el-table-column label="创建时间" prop="created_at"></el-table-column>
        <el-table-column label="状态" >
          <template slot-scope="scope">
                <p v-if='scope.row.order_verify_created_at'>已核销</p>
                <p v-else>未核销</p>
          </template>
        </el-table-column>
        <el-table-column label="核销时间">
          <template slot-scope="scope">
                <p v-if='scope.row.order_verify_created_at'>{{scope.row.order_verify_created_at}}</p>
                <p v-else>---</p>
          </template>
        </el-table-column>
      </el-table>

     <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="CouponpageChange"
          :current-page="couponpage"
          :page-size="couponSize"
          layout="total, prev, pager, next, jumper"
          :total="couponTotal"
        ></el-pagination>
      </div>
    </el-col>
    </div>

    <div class="class_btn">
      <el-button size="mini" type="primary" @click="handleCancel">确定</el-button>
      <el-button size="mini" type="danager" @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import {
  orderUserProductOrderList,
  orderUserCashCouponOrderList
} from "@/api/member";

export default {
  name: "member_order_detail",
  props: ["visible", "currentId"],
  data() {
    return {
      page:1,
      size:20,
      total:0,
      couponpage:1,
        couponSize:20,
        couponTotal:0,
      productTableData:[],
      orderTableData:[],
    };
  },
  watch: {
    visible(newValue) {
      if (newValue) {
        this.getProductOrderList()
        this.memberCashCouponOrderList()
      }
    }
  },
  methods: {
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    handleCancel() {
      this.$emit("showMemberOrderdetail");
    },
    pageChange(page) {
      this.page = page;
      this.getProductOrderList()
    },
    CouponpageChange(page) {
      this.couponpage = page;
      this.memberCashCouponOrderList();
    },
    
    //获取会员商品订单
    async getProductOrderList(){
       var url  = 'uid='+this.currentId
                  +'&page='+this.page
                  +'&size='+this.size
        let res  = await orderUserProductOrderList(url);
    
        if(res.code === 10000){
        
         this.productTableData = res.data.data
         this.total = res.data.total
         
      }else{
        this.$message.error(res.message)
      }
    },
    //获取会员现金券订单
    async memberCashCouponOrderList() {
      var url  = 'uid='+this.currentId
                  +'&page='+this.couponpage
                  +'&size='+this.couponSize
      let  res  = await orderUserCashCouponOrderList(url)
      if(res.code === 10000){
         this.orderTableData = res.data.data
         this.couponTotal = res.data.total
      }else{
        this.$message.error(res.message)
      }
    }
  }
};
</script>


<style scoped lang="scss">
.detail_content {
  padding: 20px;
  .title {
    font-size: 16px;
  }
  .pagination{
    float: right;
    margin-bottom: 10px;
  }
  .base_info {
    margin: 15px 20px 20px;
    span {
      font-size: 12px;
      color: #999999;
    }

    p {
      font-size: 13px;
      color: #333333;
    }
  }
  .order_info {
    margin-top: 16px;
  }
  .table_member_order{
    margin: 20px 0px 10px;
   
  }
  .class_btn {
    margin-top: 30px;
    text-align: center;
  }
}
</style>

